<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新辉材料进场记录</title>
    <!-- 保留原有样式不变 -->
    <style>
        :root {
            --primary-color: #2c3e50;
            --secondary-color: #3498db;
            --accent-color: #2980b9;
            --background-color: #f5f7fa;
            --text-color: #333;
            --light-text-color: #fff;
            --border-radius: 10px;
            --box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
        }

        body {
            font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
            margin: 0;
            padding: 2rem;
            background: linear-gradient(135deg, #f5f7fa 0%, #e4e8eb 100%);
            color: var(--text-color);
            min-height: 100vh;
        }

        .container {
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
        }

        h1 {
            color: var(--primary-color);
            margin-bottom: 2rem;
            font-size: 2.5rem;
            text-align: center;
            position: relative;
            padding-bottom: 1rem;
        }

        h1::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 100px;
            height: 4px;
            background: var(--secondary-color);
            border-radius: 2px;
        }

        form {
            background-color: var(--light-text-color);
            padding: 2rem;
            border-radius: var(--border-radius);
            box-shadow: var(--box-shadow);
            width: 100%;
            max-width: 500px;
            margin: 0 auto 3rem;
        }

        form div {
            margin-bottom: 1.5rem;
            display: flex;
            flex-direction: column;
        }

        label {
            font-weight: 600;
            margin-bottom: 0.5rem;
            color: var(--primary-color);
        }

        input[type="text"],
        input[type="number"],
        input[type="date"] {
            padding: 0.8rem;
            border: 2px solid #ddd;
            border-radius: 6px;
            font-size: 1rem;
            transition: border-color 0.3s ease;
        }

        input[type="text"]:focus,
        input[type="number"]:focus,
        input[type="date"]:focus {
            outline: none;
            border-color: var(--secondary-color);
        }

        button {
            background-color: var(--secondary-color);
            color: var(--light-text-color);
            padding: 1rem 2rem;
            border: none;
            border-radius: var(--border-radius);
            cursor: pointer;
            font-size: 1rem;
            font-weight: 600;
            transition: all 0.3s ease;
            width: 100%;
            letter-spacing: 1px;
        }

        button:hover {
            background-color: var(--accent-color);
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        }

        .table-container {
            background-color: var(--light-text-color);
            border-radius: var(--border-radius);
            box-shadow: var(--box-shadow);
            padding: 1rem;
            overflow: hidden;
        }

        table {
            width: 100%;
            border-collapse: collapse;
        }

        th, td {
            padding: 1rem;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }

        th {
            background-color: var(--primary-color);
            color: var(--light-text-color);
            font-weight: 600;
        }

        tr:nth-child(even) {
            background-color: #f8f9fa;
        }

        tr:hover {
            background-color: #e9ecef;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>新辉材料进场记录</h1>
        <form id="outboundForm">
            <div>
                <label for="itemName">物品名称</label>
                <input type="text" id="itemName" required>
            </div>
            <div>
                <label for="quantity">出库数量</label>
                <input type="number" id="quantity" min="1" required>
            </div>
            <div>
                <label for="constructionSite">工地名称</label>
                <input type="text" id="constructionSite" required>
            </div>
            <div>
                <label for="outboundDate">出库日期</label>
                <input type="date" id="outboundDate" required>
            </div>
            <button type="submit">添加记录</button>
        </form>
        
        <div style="display: flex; justify-content: center; margin-bottom: 2rem;">
            <button id="exportBtn" style="width: auto; padding: 0.8rem 1.5rem; margin: 0 0.5rem;">导出全部数据</button>
            <button id="exportBySiteBtn" style="width: auto; padding: 0.8rem 1.5rem; margin: 0 0.5rem;">按工地导出</button>
        </div>
        
        <div class="table-container">
            <table id="outboundTable">
                <!-- 表格结构会动态生成 -->
            </table>
        </div>
    </div>
    
    <style>
        .toggle-icon {
            display: inline-block;
            width: 0;
            height: 0;
            border-left: 6px solid transparent;
            border-right: 6px solid transparent;
            border-top: 8px solid var(--primary-color);
            margin-right: 8px;
            transition: transform 0.3s ease;
        }

        .group-header.collapsed .toggle-icon {
            transform: rotate(-90deg);
        }
    </style>

    <script>
        const outboundForm = document.getElementById('outboundForm');
        const outboundTable = document.getElementById('outboundTable');
        let outboundRecords = JSON.parse(localStorage.getItem('outboundRecords')) || [];

        // 页面加载时更新表格
        updateTable();

        // 表单提交事件处理函数（保留这一个版本）
        outboundForm.addEventListener('submit', function(event) {
            event.preventDefault();

            const newRecord = {
                itemName: document.getElementById('itemName').value,
                quantity: document.getElementById('quantity').value,
                constructionSite: document.getElementById('constructionSite').value,
                outboundDate: document.getElementById('outboundDate').value
            };

            outboundRecords.push(newRecord);
            localStorage.setItem('outboundRecords', JSON.stringify(outboundRecords));
            outboundForm.reset();
            updateTable();
        });

        // 更新表格显示的函数（保留这一个版本）
        function updateTable() {
            // 按工地名称分组
            const groupedRecords = {};
            outboundRecords.forEach(record => {
                if (!groupedRecords[record.constructionSite]) {
                    groupedRecords[record.constructionSite] = [];
                }
                groupedRecords[record.constructionSite].push(record);
            });

            outboundTable.innerHTML = `
                <thead>
                    <tr>
                        <th>物品名称</th>
                        <th>出库数量</th>
                        <th>工地名称</th>
                        <th>出库日期</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
            `;

            for (const site in groupedRecords) {
                // 插入分组标题行
                outboundTable.innerHTML += `
                    <tr class="group-header" data-site="${site}" style="cursor: pointer;">
                        <td colspan="5">
                            <span class="toggle-icon"></span>
                            <strong>${site}</strong>
                        </td>
                    </tr>
                `;

                groupedRecords[site].forEach((record, index) => {
                    const overallIndex = outboundRecords.findIndex(r => 
                        r.itemName === record.itemName && 
                        r.quantity === record.quantity && 
                        r.constructionSite === record.constructionSite && 
                        r.outboundDate === record.outboundDate
                    );
                    outboundTable.innerHTML += `
                        <tr class="site-${site}" style="display: table-row;">
                            <td>${record.itemName}</td>
                            <td>${record.quantity}</td>
                            <td>${record.constructionSite}</td>
                            <td>${record.outboundDate}</td>
                            <td><button class="delete-btn" data-index="${overallIndex}">删除</button></td>
                        </tr>
                    `;
                });
            }

            outboundTable.innerHTML += '</tbody>';

            // 为分组标题行添加点击事件监听器
            document.querySelectorAll('.group-header').forEach(header => {
                header.addEventListener('click', function() {
                    const site = this.dataset.site;
                    const rows = document.querySelectorAll(`.site-${site}`);
                    const icon = this.querySelector('.toggle-icon');
                    this.classList.toggle('collapsed');
                    rows.forEach(row => {
                        if (row.style.display === 'none') {
                            row.style.display = 'table-row';
                        } else {
                            row.style.display = 'none';
                        }
                    });
                });
            });

            // 为删除按钮添加点击事件监听器（使用无登录检查的版本）
            document.querySelectorAll('.delete-btn').forEach(button => {
                button.addEventListener('click', function() {
                    const index = this.dataset.index;
                    outboundRecords.splice(index, 1);
                    localStorage.setItem('outboundRecords', JSON.stringify(outboundRecords));
                    updateTable();
                });
            });
        }

        // 添加导出按钮事件监听 - 仅保留TXT格式导出
        document.getElementById('exportBtn').addEventListener('click', function() {
            if(outboundRecords.length === 0) {
                alert('没有可导出的数据');
                return;
            }

            // 创建中文格式的TXT数据
            let txtData = "仓库出库记录\n";
            txtData += "导出时间: " + new Date().toLocaleString() + "\n\n";
            
            outboundRecords.forEach(record => {
                txtData += `物品名称: ${record.itemName}\n`;
                txtData += `出库数量: ${record.quantity}\n`;
                txtData += `工地名称: ${record.constructionSite}\n`;
                txtData += `出库日期: ${record.outboundDate}\n`;
                txtData += "----------------------------\n";
            });
    
            // 创建Blob对象
            const blob = new Blob([txtData], { type: 'text/plain' });
            // 创建下载链接
            const url = URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = `仓库出库记录_${new Date().toLocaleDateString()}.txt`;
            // 触发下载
            document.body.appendChild(a);
            a.click();
            // 清理
            document.body.removeChild(a);
            URL.revokeObjectURL(url);
        });

        // 修改按工地导出按钮事件监听 - 调整对话框样式
        document.getElementById('exportBySiteBtn').addEventListener('click', function() {
            // 获取所有工地名称
            const sites = [...new Set(outboundRecords.map(record => record.constructionSite))];
            
            if(sites.length === 0) {
                alert('没有可导出的工地数据');
                return;
            }
    
            // 创建选择对话框
            const dialog = document.createElement('div');
            dialog.style.position = 'fixed';
            dialog.style.top = '50%';
            dialog.style.left = '50%';
            dialog.style.transform = 'translate(-50%, -50%)';
            dialog.style.backgroundColor = 'white';
            dialog.style.padding = '30px';
            dialog.style.borderRadius = '12px';
            dialog.style.boxShadow = '0 10px 25px rgba(0,0,0,0.2)';
            dialog.style.zIndex = '1000';
            dialog.style.width = '500px';
            dialog.style.maxWidth = '90%';
            dialog.style.maxHeight = '80vh';
            dialog.style.overflow = 'auto';
            dialog.innerHTML = `
                <h3 style="margin:0 0 20px 0;color:var(--primary-color);font-size:1.5rem;text-align:center;">选择要导出的工地</h3>
                <div style="max-height:400px;overflow-y:auto;margin:20px 0;border:1px solid #eee;padding:15px;border-radius:8px;">
                    ${sites.map(site => `
                        <div style="padding:10px;margin:5px 0;background:#f8f9fa;border-radius:6px;">
                            <input type="checkbox" id="site-${site}" checked style="transform:scale(1.3);margin-right:10px;">
                            <label for="site-${site}" style="font-size:1.1rem;">${site}</label>
                        </div>
                    `).join('')}
                </div>
                <div style="display:flex;justify-content:space-between;gap:15px;">
                    <button id="selectAllBtn" style="flex:1;padding:12px;font-size:1rem;background:var(--secondary-color);color:white;border:none;border-radius:6px;cursor:pointer;">全选</button>
                    <button id="exportSelectedBtn" style="flex:1;padding:12px;font-size:1rem;background:var(--accent-color);color:white;border:none;border-radius:6px;cursor:pointer;">导出选中</button>
                </div>
            `;
    
            // 添加到页面
            document.body.appendChild(dialog);
    
            // 全选按钮事件
            document.getElementById('selectAllBtn').addEventListener('click', function() {
                const checkboxes = dialog.querySelectorAll('input[type="checkbox"]');
                const allChecked = [...checkboxes].every(cb => cb.checked);
                checkboxes.forEach(cb => cb.checked = !allChecked);
                this.textContent = allChecked ? '全选' : '取消全选';
            });
    
            // 导出选中按钮事件
            document.getElementById('exportSelectedBtn').addEventListener('click', function() {
                const selectedSites = [...dialog.querySelectorAll('input[type="checkbox"]:checked')]
                    .map(cb => cb.nextElementSibling.textContent);
                
                if(selectedSites.length === 0) {
                    alert('请至少选择一个工地');
                    return;
                }
    
                // 移除对话框
                document.body.removeChild(dialog);
    
                // 为每个选中的工地创建导出链接
                selectedSites.forEach(site => {
                    // 筛选该工地的记录
                    const siteRecords = outboundRecords.filter(record => record.constructionSite === site);
                    
                    // 创建中文格式的TXT数据
                    let txtData = `工地: ${site}\n`;
                    txtData += "仓库出库记录\n";
                    txtData += "导出时间: " + new Date().toLocaleString() + "\n\n";
                    
                    siteRecords.forEach(record => {
                        txtData += `物品名称: ${record.itemName}\n`;
                        txtData += `出库数量: ${record.quantity}\n`;
                        txtData += `出库日期: ${record.outboundDate}\n`;
                        txtData += "----------------------------\n";
                    });
    
                    // 创建Blob对象
                    const blob = new Blob([txtData], { type: 'text/plain' });
                    // 创建下载链接
                    const url = URL.createObjectURL(blob);
                    const a = document.createElement('a');
                    a.href = url;
                    a.download = `仓库出库记录_${site}_${new Date().toLocaleDateString()}.txt`;
                    // 触发下载
                    document.body.appendChild(a);
                    a.click();
                    // 清理
                    document.body.removeChild(a);
                    URL.revokeObjectURL(url);
                });
            });
        });
    </script>
</body>
</html>

